<template>
	<view class="body">
		<view class="top">
			<scroll-view class="menu" scroll-x>
				<view class="navbar" v-for="(item,index) in list" @click="reloadData(index,item.type_id)">
					<span :style="{'fontWeight':type_id0===item.type_id?'600':'500','borderBottom':type_id0===item.type_id?'1px solid #fff':''}">{{item.type_name}}</span>
				</view>
			</scroll-view>
			<view v-for="(item,index) in list" :class="showMenu == index?'show':'hide'">
				<scroll-view class="menu-v" scroll-x>
					<view class="navbar-v" v-for="(ite,idx) in item.children">
						<view @click="loadData(ite.type_id,ite.type_pid)">
						<span :style="{'fontWeight':type_id1===ite.type_id?'600':'500','borderBottom':type_id1===ite.type_id?'1px solid #000':''}">{{ite.type_name}}
						</span>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="tab-body">
			<scroll-view scroll-y style="height:100vh;width: 100%;" refresher-enabled="true"
				:refresher-triggered="trigger" @refresherrefresh="refresherrefresh"
				@scrolltolower="onreachBottom(type_id)">
				<view class="ym-gird">
					<view class="ym-gird-item" v-for="(item,index) in videoList" @click="navto(item)" :key="index">
						<image class="ym-gird-img" mode="aspectFill" :src="item.vod_pic"></image>
						<text class="ym-gird-title">{{item.vod_name}}</text>
						<text class="ym-gird-info">{{item.vod_remarks}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		siteUrls
	} from "../../utils/api.js"
	export default {
		data() {
			return {
				showMenu: 0,
				list: [],
				videoList: [],
				page: 1,
				type_id: 0,
				type_id0:0,
				type_id1:0,
				wd:'',
				duration: 500,
				status: 'loadmore',
				url: '',
				trigger: true,
			}
		},
		onLoad() {
			var that = this;
			// 获取设置的资源站
			that.url = uni.getStorageSync('url');
			// 获取分类
			if(that.url){
				this.getCategory();
			}
			
		},

		methods: {
			// 获取分类 
			getCategory() {
				var that = this;
				that.list = [];
				uni.request({
					url: that.url,
					data: {},
					method: "GET",
					header: {
						"content-type": "application/json",
					},
					success: function(res) {
						res.data.class.map(function(item, i) {
							if (item['type_pid'] == 0) {
								item.children = [];
								item.name = item.type_name;
								item.type_id = item.type_id;
								that.list = that.list.concat(item)
							}
							if(!item.hasOwnProperty('type_pid')){
								item.children = [];
								item.name = item.type_name;
								item.type_id = item.type_id;
								that.list = that.list.concat(item)
							}
						})
						res.data.class.map(function(item, index) {
							that.list.map(function(ite, idx) {
								if (item.hasOwnProperty('type_pid') && item['type_pid'] == ite['type_id']) {
									that.list[idx]['children'] = that.list[idx]['children']
										.concat([item]);
								}
							})
						})
						// console.log(that.list);
						if (that.list[0]['children'].length != 0) {
							that.type_id = that.list[0]['children'][0]['type_id']
							that.type_id0 = that.list[0]['children'][0]['type_pid']
						} else {
							that.type_id = that.list[0]['type_id']
						}
						console.log(that.type_id,that.type_id0);
						that.loadData(that.type_id,that.type_id0);
					},
					fail: function() {}
				})
			},
			refresherrefresh() {
				var that = this;
				that.trigger = true;
				// 获取设置的资源站  
				that.url = uni.getStorageSync('url');
				this.getCategory();
				setTimeout(() => {
					that.trigger = false;
				}, 1000);
			},
			// 载入数据
			loadData(type_id,type_id0) {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				});
				this.page = 1;
				var that = this;
				that.videoList = [];
				that.type_id = type_id;
				that.type_id1 = type_id;
	            that.type_id0 = type_id0 || that.type_id0;
				// 获取数据
				uni.request({
					url: that.url,
					data: {
						t: type_id,
						pg: this.page,
						ac: 'videolist',
						wd: this.wd,
					},
					method: "GET",
					header: {
						"content-type": "application/json",
					},
					success: function(res) {
						that.videoList = res.data.list;
						uni.hideLoading();
					},
					fail: function() {
						uni.hideLoading();
						uni.showModal({
							title: "网络错误",
							content: "网络出错，请刷新重试",
							showCancel: !1
						});
					}
				})

			},
			reloadData(index, type_id) {
				this.showMenu = index;
				this.type_id0 = type_id;
				this.loadData(type_id);
			},
			navto(e) {
				uni.navigateTo({
					url: '/pages/play/play?id=' + e.vod_id
				})
			},
			onreachBottom(type_id) {
				uni.showLoading({
					title: "正在加载...",
					mask: true
				});
				this.page++;
				var that = this;
				uni.request({
					url: that.url,
					data: {
						t: type_id,
						pg: this.page,
						ac: 'videolist',
						wd: this.wd,
					},
					method: "GET",
					header: {
						"content-type": "application/json"
					},
					success: function(res) {
						that.videoList = that.videoList.concat(res.data.list);
						uni.hideLoading();
					},
					fail: function() {
						that.page--;
						uni.hideLoading();
						uni.showModal({
							title: "网络错误",
							content: "网络出错，请刷新重试",
							showCancel: !1
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		// width: 100%;
		// position: fixed;
		// z-index: 999;
		// left: 0;
		// top: 0;
	}

	.menu {
		width: 100%;
		white-space: nowrap;
		background-color: #00aa7f;
		color: #ffffff;
		height: 80rpx;
		line-height: 80rpx;
	}

	.navbar {
		padding: 0 10rpx;
		display: inline-block;
	}

	.menu-v {
		width: 100%;
		white-space: nowrap;
		background-color: #ffffff;
	}

	.navbar-v {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 10px;
		display: inline-block;
	}

	.show {
		display: block;
	}

	.hide {
		display: none;
	}

	.swiper {
		width: 100%;
	}

	.body {
		height: 100%;
	}

	.tab-body {
		margin-top: 10rpx;
		// margin-bottom: 100rpx;
		width: 100%;
		height: 100%;
	}

	.ym-gird {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		width: 750rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;

		.ym-gird-item {
			width: 236.6666rpx;
			display: flex;
			flex-direction: column;
			background-color: white;
			margin: 5rpx;
			border-radius: 10rpx;

			.ym-gird-img {
				width: 236.6666rpx;
				height: 300rpx;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}

			.ym-gird-title {
				font-size: 32rpx;
				color: #333333;
				padding: 5rpx 10rpx;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
				overflow: hidden;
				/** 隐藏超出的内容 **/
			}

			.ym-gird-info {
				font-size: 28rpx;
				color: #666666;
				padding: 5rpx 10rpx;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 2;
				/** 显示的行数 **/
				overflow: hidden;
				/** 隐藏超出的内容 **/
				min-height: 80rpx;
			}
		}
	}

	.bot {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 35rpx;
		z-index: 10000;
		background-color: #EE5A24;
		color: white;
	}
</style>